<template>
  <div class="studenList">
    <div
      class="tableBox"
      v-if="currSelectStudentTaskData.length && !renderingStuList"
    >
      <div
        class="studenSubmitInfo"
        :class="{ openDetialContent: currOpen === index || oldOpen === index }"
        v-for="(item, index) in [...currSelectStudentTaskData]"
        :key="item.userID"
        @click="handleChangeOpen(item, index)"
      >
        <div class="checkIsHaveData" v-if="!item.notTaskData">
          <div
            class="narrowBox"
            v-if="item && item.guidelineResults[gitem.guidelineID]"
          >
            <div class="userInfo">
              <span :title="item.name">{{ item.name }}</span>
              <span title="" style="margin-top: 5px">{{
                item.guidelineResults[gitem.guidelineID].lastUpdatedTime
                  | filterTimeYMD
              }}</span>
            </div>
            <div class="submit_comment">
              <div class="content">
                评语：{{
                  item.guidelineResults[gitem.guidelineID].guidelineComment ? 
                  (item.guidelineResults[gitem.guidelineID].guidelineComment === "已批阅"? "已提交" : 
                  item.guidelineResults[gitem.guidelineID].guidelineComment) :
                   gitem.operType === operType['brush'] ? "未提交": "未批阅"
                }}
              </div>
              <div class="content uAnswer" v-if="gitem.operType == operType['reply']">
                回答：{{
                  item.guidelineResults[gitem.guidelineID].submitContent.data
                }}
              </div>
              <div class="content uAnswer" v-if="gitem.operType == operType['upload'] || gitem.operType == operType['archive']">
                <span>回答：</span>
                <span style="cursor: pointer">
                  {{
                    item.guidelineResults[gitem.guidelineID].submitContent
                      | filterFileName
                  }}
                </span>
              </div>
            </div>
            <div class="score">
              {{
                filterScore(item.guidelineResults[gitem.guidelineID].guidelineScore ||
                item.guidelineResults[gitem.guidelineID].gameOrExciseScore)
              }}
            </div>
            <div class="iconBox">
              <img
                src="../../../../../../assets/images/reviewDown.png"
                style="cursor: pointer"
                alt=""
                @click.native="handleChangeOpen(item, index)"
              />
            </div>
          </div>
          <div
            class=""
            v-if="!item || !item.guidelineResults[gitem.guidelineID]"
          >
            <div class="userInfo">
              <span :title="item.name">{{ item.name }}</span>
              <!-- <span title="" style="margin-top: 5px">{{
              item.guidelineResults[gitem.guidelineID].lastUpdatedTime
                | filterTimeYMD
            }}</span> -->
            </div>
            <div>此学生缺少引导文数据</div>
          </div>
          <div
            class="detialContent"
            v-if="
              currOpen === index && item.guidelineResults[gitem.guidelineID]
            "
          >
            <!-- <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="暂无学生输入的内容"
              v-model="
                item.guidelineResults[gitem.guidelineID].submitContent.data
              "
              v-if="gitem.operType == operType['show']"
              :disabled="true"
              @click.native.stop
            >
            </el-input> -->
            <upload
              v-if="gitem.operType == operType['upload'] || gitem.operType == operType['archive']"
              ref="uploadComponents"
              :correctStudentSbmJson="getStuSbmJSON(item)"
              :studentInfo="item"
              :unShowGroupIcon="true"
              :titem="selectTaskInfo.task.data"
            />
            <links :settedLink="item.guidelineResults[gitem.guidelineID].submitContent.data.showLink" v-if="gitem.operType == operType['show']" />
            <wangEidtor :editId="item.userID" :placeholder="'无提交内容'" :menus="['link']" :isReview="true" 
              :value="item.guidelineResults[gitem.guidelineID].submitContent.data" :disabled="true" @change="handleSetUserDataString(...arguments, index)"
              v-if="gitem.operType == operType['reply']"
            />
            <onlineTool v-if="showOnlineTool && gitem.operType == operType['reply'] && onlineToolUrl" :url="onlineToolUrl" />
            <div v-if="gitem.operType == operType['brush']">
              <!-- 查看做题记录功能正在升级中... -->
              <!-- 没有查看做题记录功能 先隐藏弹窗 -->
              <el-button type="text" size="mini" @click.stop="iframeShow = true" >打开刷题</el-button>
              <brushQuestions
                :title="`查看记录`"
                :sitem="item.guidelineResults[gitem.guidelineID]"
                :stuUserID="item.userID"
                :iframeShow="iframeShow"
                :iframeRouter="iframeRouter"
                :foreignID="gitem.foreignID"
                @handleIframeClose="handleIframeClose"
                :width="getWidth(index)"
                class="quesBrushIframe"
                :isMarking="true"
              />
            </div>
          </div>
        </div>
        <div v-else>
          <div class="userInfo">
            <span :title="item.name">{{ item.name }}</span>
          </div>
          <div>此学生缺少引导文数据</div>
        </div>
      </div>
    </div>
    <div class="" v-else>请在学生列表确认批阅的学生</div>
  </div>
</template>

<script>
const upload = () => import("@/views/courses/detail/task_N/taskType_N/compoment/studyUpload.vue");
// import { renderTimeToYMD } from "@/util/tool";
// import taskGroupVue from "../../../../../creativeCourses/creative/taskGroup.vue";
// const brushQuestions = () =>
//   import("@/views/teacher/correct/taskType/brushQuestions");
const brushQuestions = () =>
  import("@/components/questionBankIframeDialog/index");
const wangEidtor = ()=> import("@/components/wangEditor/index.vue")
const links = () =>
  import("@/views/courses/detail/task_N/taskType_N/compoment/links");
const onlineTool = ()=> import("@/components/onlineTool/index")
import { location_QuestionBank } from "@/util/tool";
import { operType } from "@/util/guidingtextType";

export default {
  components: {
    upload,
    brushQuestions,
    wangEidtor,
    links,
    onlineTool
  },
  data() {
    return {
      currOpen: null,
      oldOpen: null,
      iframeShow: false, // 打开刷题界面
      operType,
      onlineToolUrl: '',
    };
  },
  props: {
    gitem: Object,
    selectTaskInfo: Object,
    currSelectStudentTaskData: Array,
    guidelineActiveNames: Array,
    renderingStuList: Boolean,
    showOnlineTool: Boolean
  },
  watch: {
    currSelectStudentTaskData() {
      this.checkAutoSelectStu();
    },
    guidelineActiveNames(n, o) {
      this.checkAutoSelectStu();
    },
  },
  computed: {
    getStuSbmJSON() {
      return function (item) {
        return JSON.parse(
          JSON.stringify(item.guidelineResults[this.gitem.guidelineID])
        );
      };
    },
    iframeRouter() {
      return `${location_QuestionBank(window)}/brush/${
        this.gitem.foreignID ? this.gitem.foreignID : "0"
      }`;
    },
  },
  filters: {
    filterFileName(value) {
      return value?.data?.filePaths?.length !== 0
        ? value?.data?.filePaths?.[0]?.fileName
        : "无上传的文件";
    },
    
    filterTimeYMD(value) {
      if (!value) return "";
      var date = new Date(value);
      return (
        date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate()
      );
    },
  },
  methods: {
    filterScore (value) {
      return value == -8 ? this.gitem.operType === operType['brush'] ? "未提交": "未批阅" : value;
    },
    handleChangeOpen(item, index) {
      if (this.currOpen !== index) {
        this.oldOpen = index;
        this.currOpen = index;
      }
      this.$nextTick(() => {
        this.$emit("handleChangeReviewStu", item);
      });
    },
    checkAutoSelectStu() {
      if (
        this.guidelineActiveNames.indexOf(this.gitem.guidelineID + "") !== -1
      ) {
        this.$nextTick(() => {
          this.autoSelectStu(0);
        });
      }
    },
    autoSelectStu(index) {
      if (
        this.currSelectStudentTaskData.length &&
        index < this.currSelectStudentTaskData.length
      ) {
        const currAutoSetSelectStu = this.currSelectStudentTaskData[index];
        if (
          currAutoSetSelectStu.notTaskData ||
          !currAutoSetSelectStu.guidelineResults[this.gitem.guidelineID]
        ) {
          this.autoSelectStu(++index);
        } else {
          this.$nextTick(() => {
            this.handleChangeOpen(currAutoSetSelectStu, index);
          });
        }
      }
    },
    // 切换下一个学生
    handleAutoSelectStu() {
      if (this.currOpen + 1 < this.currSelectStudentTaskData.length)
        this.autoSelectStu(this.currOpen + 1);
    },
    getWidth(index) {
      const getEl = document.getElementsByClassName("detialContent")[0]
      if (getEl) {
        return (getEl.clientWidth - 20) + 'px'
      } else return '490px'
    },
    handleIframeClose() {
      this.iframeShow = false
    },
    handleSetUserDataString(data, index) {
      // this.onlineToolUrl = data.decodeText ? `https://www.it1352.com/Onlinetools/OnlineCompileCommon/6?c_height=100&r_height=100&code=${encodeURI(data.decodeText)}&autoExecute=false` : ''
      this.onlineToolUrl = `https://c.runoob.com/compile/11/`
      // console.log(encodeURIComponent(data.decodeText));
    },
  },
};
</script>

<style lang="stylus">
.studenList {
  width: 100%;

  .tableBox {
    border: solid 1px #c4d3dc;
    border-radius: 5px;
    overflow: hidden;

    .studenSubmitInfo {
      padding: 13px 27px 10px 30px;
      // padding-left: 30px;
      min-height: 60px;
      border-bottom: 1px solid #f1f6fd;

      .narrowBox {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        max-height: 42px;

        .userInfo {
          display: flex;
          flex-flow: column;
          justify-content: flex-start;
          align-items: flex-start;
          width: 84px;
          max-height: 42px;
          font-family: Yu Gothic UI;
          font-size: 1rem;
          color: #000;

          span {
            // display: inline-block;
            line-height: 1;
            max-width: 84px;
            width: 84px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .submit_comment {
          margin-left: 40px;
          // flex: 1;
          // max-width: 55%;
          width: 290px;
          // margin-right: 10px;
          margin-right: auto;

          .content {
            height: 17px;
            line-height: 17px;
            font-family: Yu Gothic UI;
            font-size: 1rem;
            color: #003262;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .uAnswer {
            margin-top: 5px;
          }
        }

        .score {
          // margin: 0 auto 0 0;
          margin-right: 30px;
          min-width: 50px;
          font-family: Yu Gothic UI;
          font-size: 1rem;
          color: #003262;
        }

        .iconBox {
          // margin-right: 10px;
          // margin-left: 55px;
        }
      }

      .detialContent {
        padding-left: 5px;
        margin-top: 5px;
        min-height: 118px;
        border-radius: 5px;
        overflow: hidden;
        background: #fff;

        .el-textarea {
          .el-textarea__inner {
            resize: none !important;
            height: 118px !important;
            max-height: 118px;
            border-radius: 5px;
          }
        }
        .w-e-text-container {
          max-height: 118px;
        }

        .is-disabled {
          .el-textarea__inner {
            cursor: text;
            font-family: Yu Gothic UI;
            font-size: 1rem;
            color: #003262;
            background: #fff;
          }
        }

        .upload-demo {
          max-height: 118px;
        }

        .uploadComponent {
          height: 118px;
          overflow-y: scroll;
          background: #fff;

          .el-upload-dragger {
            min-height: 115px;
            border: none;
          }
        }

        .uploadComponent::-webkit-scrollbar {
          cursor: pointer;
          width: 4px;
          height: 1px;
        }

        /* 定义滚动条的滑块的样式有圆角和阴影以及自定义的背景色 */
        .uploadComponent::-webkit-scrollbar-thumb {
          -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.1);
          background: #ccc;
          border-radius: 10px;
        }

        /* 定义滚动条所在轨道的样式。有圆角和阴影以及淡色系的背景色 */
        .uploadComponent::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.1);
          border-radius: 4px;
        }
      }
    }

    .studenSubmitInfo:hover {
      background-color: #f1f6fd;
    }

    .studenSubmitInfo:last-child {
      border: none;
    }

    .openDetialContent {
      border: none;
      background-color: #f1f6fd;
    }
  }
}
iframe {
  .brushQuestions {
    width 450px
  }
}
</style>